<template>
  <el-container style="height: 100%">
    <el-aside width="200px" style="background-color: #f1f1f1">
      <div></div>
      <el-menu mode="vertical" background-color="#f1f1f1" text-color="#777777" active-text-color="#000000"
               :default-active="0" @select="selectItem">
        <el-menu-item v-for="item in items" :index="item.index" :key="item.index">
          <div id="text">{{ item.title }}</div>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <MarkDown :content="content"></MarkDown>
    </el-main>
  </el-container>
</template>

<script>

import MarkDown from "./MarkDown.vue";
import FileManager from '../tools/FileManager.js'

export default {
  mounted() {
    // 组件挂载的时候，加载默认的首篇文章
    this.currentIndex = this.itemIndex;
    console.log(this.topic, this.items[this.currentIndex].title);
    FileManager.getPostContent(this.topic, this.items[this.currentIndex].title).then((res) => {
      this.content = res.data;
      console.log(this.content);
    })
  },

  // topic为当前选中的专题名称
  props: ["items", "topic", "itemIndex"],

  data() {
    return {
      // 在侧边栏上当前选中的文章
      currentIndex: 0,
      // 文档的markdown内容
      content: ""
    }
  },

  components: {
    MarkDown: MarkDown,
  },

  methods: {
    selectItem(index) {
      this.currentIndex = index
    }
  },

  watch: {
    // 监听选中的文章变化
    currentIndex: function (val) {
      FileManager.getPostContent(this.topic, this.items[val].title).then((res) => {
        this.content = res.data;
      })
    },
    // 监听选中的主题变化
    topic: function (val) {
      // TODO 此处可以解决换主题带来的bug，但是没有选中文章！ 第一个专题选第三篇文章，第二个专题没有第三个文章时就会报错！
      //this.currentIndex = 0;
      this.selectItem(0);
      FileManager.getPostContent(val, this.items[this.currentIndex].title).then((res) => {
        this.content = res.data;
      })
    }
  }
};
</script>

<!-- 当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，通过该属性，可以使得组件之间的样式不互相污染。 -->
<style scoped>
.el-menu-item.is-active {
  background-color: #ffffff !important;
}
</style>